/**
 * Carousels.js
 * 
 * 图片轮播组件，用于在应用中显示图片轮播图
 * 使用 react-native-reanimated-carousel 库实现轮播效果
 */

import { StyleSheet, Text, View, Image, Dimensions } from 'react-native';
import React, { useState } from 'react';
import Carousel from 'react-native-reanimated-carousel';

/**
 * Carousels 组件
 * 显示一个自动播放的图片轮播图
 * @returns {JSX.Element} 轮播图组件
 */
const Carousels = () => {
    // 轮播图图片数组，包含图片的URL
    const images = [
        "https://raw.githubusercontent.com/dohooo/react-native-reanimated-carousel/HEAD/assets/home-banner.png",
        "https://images.pexels.com/photos/5591581/pexels-photo-5591581.jpeg?auto=compress&cs=tinysrgb&w=800",
    ];

    // 获取屏幕宽度，用于设置轮播图宽度
    const { width } = Dimensions.get('window');
    // 当前激活的轮播图索引状态
    const [activeIndex, setActiveIndex] = useState(0);

    /**
     * 渲染轮播图组件
     */
    return (
        <View style={styles.container}>
            <Carousel
                loop                        // 是否循环播放
                width={width}               // 轮播图宽度
                height={200}                // 轮播图高度
                autoPlay={true}             // 是否自动播放
                autoPlayInterval={3000}     // 自动播放间隔时间(毫秒)
                data={images}               // 轮播图数据源
                scrollAnimationDuration={1000}  // 滚动动画持续时间
                renderItem={({ item }) => (  // 渲染每个轮播项
                    <View style={styles.slide}>
                        <Image 
                            source={{ uri: item }} 
                            style={styles.image}
                            resizeMode="cover"
                        />
                    </View>
                )}
                panGestureHandlerProps={{
                    activeOffsetX: [-10, 10],  // 设置手势响应的偏移量
                }}
            />

        </View>
    );
};

export default Carousels;

/**
 * 样式定义
 * 使用StyleSheet.create创建组件样式
 */
const styles = StyleSheet.create({
    container: {
        marginVertical: 5,      // 垂直方向外边距
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    image: {
        width: '96%',           // 图片宽度为容器的96%
        height: '100%',         // 图片高度为容器的100%
        borderRadius: 6,        // 图片圆角
    },
});